<template>
	<view class="logistics-container">
		<!-- 顶部物流状态卡片 -->
		<view class="logistics-header">
			<view class="logistics-status">
				<view class="status-text">
					<text class="status-title">订单派送中</text>
					<text class="status-desc">预计明天送达</text>
					<text class="courier-info">申通快递 7511266366963366</text>
				</view>
				<image class="logistics-icon" src="/static/svg/logistics-truck.svg" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 物流详情时间线 -->
		<view class="logistics-timeline">
			<view class="timeline-title">物流详情</view>
			
			<!-- 物流时间线列表 -->
			<view class="timeline-list">
				<!-- 正在派送的物流节点（当前状态） -->
				<view class="timeline-item active">
					<view class="timeline-time">
						<text class="time-day">今天</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-active-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-line" v-if="true"></view>
						<view class="timeline-info">
							<text class="timeline-status">派送中</text>
							<text class="timeline-detail">【深圳市】科技园派送员宋平正在为您派件</text>
						</view>
					</view>
				</view>
				
				<!-- 其他物流节点 -->
				<view class="timeline-item">
					<view class="timeline-time">
						<text class="time-day">昨天</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-line" v-if="true"></view>
						<view class="timeline-info">
							<text class="timeline-status">运输中</text>
							<text class="timeline-detail">在广东深圳公司进行发出扫描</text>
						</view>
					</view>
				</view>
				
				<view class="timeline-item">
					<view class="timeline-time">
						<text class="time-day">12-18</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-line" v-if="true"></view>
						<view class="timeline-info">
							<text class="timeline-status"></text>
							<text class="timeline-detail">在分拣中心广东深圳公司进行卸车扫描</text>
						</view>
					</view>
				</view>
				
				<view class="timeline-item">
					<view class="timeline-time">
						<text class="time-day">12-17</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-line" v-if="true"></view>
						<view class="timeline-info">
							<text class="timeline-status"></text>
							<text class="timeline-detail">在北京市丰台区转运</text>
						</view>
					</view>
				</view>
				
				<view class="timeline-item">
					<view class="timeline-time">
						<text class="time-day">12-17</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-line" v-if="true"></view>
						<view class="timeline-info">
							<text class="timeline-status"></text>
							<text class="timeline-detail">在北京市进行下级地点扫描</text>
						</view>
					</view>
				</view>
				
				<view class="timeline-item">
					<view class="timeline-time">
						<text class="time-day">12-15</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-line" v-if="true"></view>
						<view class="timeline-info">
							<text class="timeline-status">已揽件</text>
							<text class="timeline-detail">包裹正在揽收</text>
						</view>
					</view>
				</view>
				
				<view class="timeline-item">
					<view class="timeline-time">
						<text class="time-day">12-15</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-line" v-if="true"></view>
						<view class="timeline-info">
							<text class="timeline-status">已发货</text>
							<text class="timeline-detail">卖家已发货</text>
						</view>
					</view>
				</view>
				
				<view class="timeline-item">
					<view class="timeline-time">
						<text class="time-day">12-15</text>
						<text class="time-hour">10:25</text>
					</view>
					<view class="timeline-content">
						<view class="timeline-dot">
							<image src="/static/svg/timeline-dot.svg" mode="aspectFit"></image>
						</view>
						<view class="timeline-info">
							<text class="timeline-status"></text>
							<text class="timeline-detail">您的订单开始处理</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// 可以在这里添加获取物流数据的逻辑
</script>

<style>
.logistics-container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

/* 顶部物流状态卡片样式 */
.logistics-header {
	background-color: #FF6633;
	padding: 30rpx;
	color: #ffffff;
}

.logistics-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.status-text {
	display: flex;
	flex-direction: column;
}

.status-title {
	font-size: 36rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.status-desc {
	font-size: 28rpx;
	margin-bottom: 20rpx;
}

.courier-info {
	font-size: 24rpx;
}

.logistics-icon {
	width: 120rpx;
	height: 120rpx;
}

/* 物流详情时间线样式 */
.logistics-timeline {
	background-color: #ffffff;
	padding: 30rpx;
	margin-top: 20rpx;
}

.timeline-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 30rpx;
}

.timeline-list {
	position: relative;
}

.timeline-item {
	display: flex;
	margin-bottom: 40rpx;
}

.timeline-time {
	width: 100rpx;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-right: 20rpx;
	color: #999999;
}

.time-day {
	font-size: 24rpx;
	margin-bottom: 5rpx;
}

.time-hour {
	font-size: 24rpx;
}

.timeline-content {
	flex: 1;
	display: flex;
	position: relative;
}

.timeline-dot {
	position: relative;
	z-index: 2;
	margin-right: 20rpx;
}

.timeline-dot image {
	width: 24rpx;
	height: 24rpx;
}

.timeline-item.active .timeline-dot image {
	width: 48rpx;
	height: 48rpx;
	margin-left: -12rpx;
	margin-top: -12rpx;
}

.timeline-line {
	position: absolute;
	left: 11rpx;
	top: 24rpx;
	width: 2rpx;
	height: calc(100% + 40rpx);
	background-color: #CCCCCC;
	z-index: 1;
}

.timeline-item:last-child .timeline-line {
	display: none;
}

.timeline-info {
	flex: 1;
}

.timeline-status {
	font-size: 28rpx;
	color: #FF6633;
	margin-bottom: 5rpx;
}

.timeline-item.active .timeline-status {
	font-weight: bold;
}

.timeline-detail {
	font-size: 28rpx;
	color: #333333;
	line-height: 1.5;
}
</style>
